<template>
  <div class="headBar" :class="$store.state.isCollapse?'position-collapse-left':'position-left'">
    <el-menu class="el-menu-demo" mode="horizontal" :background-color="themeColor" text-color="#fff" active-text-color="#ffd04b">
      <!-- 导航收缩按钮 -->
      <el-menu-item index="1" @click="changeCollapse"><i class="iconfont icon-daohang"></i></el-menu-item>
      <el-submenu index="2" class="avatar">
        <template slot="title"><span>admin</span><img src="@/assets/avatar1.jpg"></template>
        <el-menu-item index="2-1" @click="goUserInfo">用户信息</el-menu-item>
        <el-menu-item index="2-2" @click="logOut">注销</el-menu-item>
      </el-submenu>
    </el-menu>
</div>
</template>

<script>
  export default {
    name: 'headBar',
    components: {
    },
    data(){
      return {
        themeColor: this.$store.state.themeColor  //主题颜色
      }
    },
    methods: {
      goUserInfo(){
        this.$router.push({path: '/userInfo/editInfo'});
      },
      logOut(){
        this.$message.success('注销成功');
        this.$router.push({path: '/login'});
      },
      changeCollapse(){  //改变导航栏状态
        this.$store.commit('changeCollapse');
      }
    }
  }
</script>

<style lang="scss" scoped>
/* 改变主题色变量 */
$--color-primary: #409EFF;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

.headBar{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1020;
  transition:0.3s;
  line-height: 64px;
  min-width: 792px;
  .el-menu{
    height: 64px;
    .el-menu-item{
      border: none;
      i{
        color: white;
      }
    }
    .avatar{
      float: right;
      padding: 0 20px;
      span{
        color: white;
        font-size: 20px;
      }
      img{
        margin-left: 10px;
        border-radius: 5px;
        width: 40px;
        height: 40px;
      }
    }
  }
}
.position-left {
  left: 201px;
}
.position-collapse-left {
  left: 65px;
}
</style>